<!-- 日期选择器组件 -->
<template>
	<view>
		<view v-if="show" class="mask" @tap="maskClick"></view>
		<view class="container" :class="[isfixedTop?'fixed-top':'fixed-bottom',show?'fadeIn':'']" v-if="show">
		    <view class="top-wrap">
				<view class="ways">
					<view :class="{active:!isDayMode}" @tap="changeDateMode(false)">按月选择</view>
					<view :class="{active:isDayMode}" @tap="changeDateMode(true)">按日选择</view>
					<!-- <view :class="{active:isDayMode}" @tap="changeDateMode(true)">总累统计</view> -->
				</view>
				<view class="cur-time">
					<template v-if="isDayMode" >
						<view @tap="dateRangeSelect(true)" :class="{active:isSelect1}">{{`${sYear}-${sMonth}-${sDay}`}}</view>
						<view>至</view>
						<view @tap="dateRangeSelect(false)" :class="{active:!isSelect1}">{{`${eYear}-${eMonth}-${eDay}`}}</view>
					</template>
					<template v-else>
						<view class="active">{{`${sYear}-${sMonth}`}}</view>
					</template>
				</view>
		    </view> 
			<!-- {{years}} -->
		    <picker-view ref="datePicker" class="picker-view" style="height: 280rpx;" v-if="visible" :indicator-style="indicatorStyle" :value="mvalue" @change="bindChange">
		        <picker-view-column>
		            <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
		        </picker-view-column>
		        <picker-view-column>
		            <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
		        </picker-view-column>
		        <picker-view-column v-if="isDayMode">
		            <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
		        </picker-view-column>
		    </picker-view>
			<view class="btns">
				<view @tap="reset">取消</view>
				<view @tap="finish">完成</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default { 
		props:{
			show:{
				type:Boolean,
				default:false
			},
			isfixedTop: { // 固定在顶部或者在头部
				type:Boolean,
				default:true
			},
		},
	    data() {
	        return {
	            title: 'picker-view', 
	            years:'',
	            months:'',
	            days:'',
				DAYS:'',
	            day:'',
	            mvalue: [],
	            visible: true,
				date1:'',
				date2:'',
				isDayMode: false,
				isSelect1: true, // 是否在选择第一个日期,
	            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				curYear:'', // 当前年份
				curMonth:'', // 当前月份
				curDay:'' ,// 当前日
				sYear:'',
				sMonth:'',
				sDay:'',
				eYear:'',
				eMonth:'',
				eDay:''
	        }
	    },
		created() {
			console.log(this.value);
			this.initDate();
			this.init();
		},
	    methods: {
			initDate(){
				let now = new Date();
				let curYear = now.getFullYear();
				let curMonth = (now.getMonth() +1).toString().padStart(2,0);
				let curDay = now.getDate().toString().padStart(2,0); 
				var days = new Date(curYear,curMonth,0).getDate();
				this.mvalue = [curYear-1990,curMonth-1,curDay-1];
				this.date1 = `${curYear}-${curMonth}-${curDay}`; 
				this.date2 = `${curYear}-${curMonth}-${days}`
				this.curYear = curYear;
				this.curMonth = curMonth;
				this.curDay = curDay;
				this.sYear = this.curYear;
				this.sMonth = this.curMonth;
				this.sDay = '01';
				this.eYear = this.curYear;
				this.eMonth = this.curMonth;
				this.eDay = days;
				console.log('初始化时间');
			},
			init() {
				const now = new Date();
				const years = [];
				const year = now.getFullYear();
				const months = [];
				const month = now.getMonth() + 1;
				const days = [];
				const day = now.getDate();
				for (let i = 1990; i <= now.getFullYear(); i++) {
				    years.push(i);
				}
				for (let i = 1; i <= 12; i++) {
				    months.push(i);
				}
				for (let i = 1; i <= 31; i++) {
				    days.push(i);
				}
				this.years = years;
				this.months = months;
				this.days = days;
				this.DAYS = days;
				this.MONTHS = months;
			},
			// 取消
			reset() {
				this.$emit('update:show',false);
			},
			// 完成
			finish() {
				let date1 = `${this.sYear}-${this.sMonth}-${this.sDay}`;
				let date2;
				var days = new Date(this.sYear,this.sMonth,0).getDate();
				if(!this.isDayMode) {
					date2 = `${this.sYear}-${this.sMonth}-${days}`;
				} else {
					date2 = `${this.eYear}-${this.eMonth}-${this.eDay}`;
				}
				
				if(this.isDayMode) {
					if(!date1.split('-').length ) {
						return uni.showToast({
							title:'请选择开始日期',
							icon:'none'
						})	
					}
					if(!date2.split('-').length) {
						return uni.showToast({
							title:'请选择结束日期',
							icon:'none'
						})
					}
					if(new Date(date1) > new Date(date2)) {
						return uni.showToast({
							title:'开始日期不得大于结束日期',
							icon:'none'
						})
					}
				}
				
				this.$emit('selected',{date1,date2,isDayMode:this.isDayMode});
				this.$emit('update:show',!this.show);
			},
	        bindChange(e) {
	            const val = e.detail.value;
				// 保存修改记录
				this.lastChange = val;
	            let year = this.years[val[0]];
	            let month = this.months[val[1]].toString().padStart(2,0);
	            var days = new Date(year,month,0).getDate();
				this.days = [...this.DAYS];
				this.days.length = days;
	            let day = (this.days[val[2]] || 1).toString().padStart(2,0);
				
				if(!this.isDayMode) { // 月选择模式
					this.eYear = year;
					this.eMonth = month;
					this.eDay = days;
				}
				if(this.isSelect1) {
					console.log('开始时间');
					this.sYear = year;
					this.sMonth = month;
					this.sDay = day;
				} else {
					console.log('结束时间');
					this.eYear = year;
					this.eMonth = month;
					this.eDay = day;
				} 
				this.mvalue = [year-1990,month-1,day-1];
				console.log(this.mvalue);
	        }, 
			// 切换显示模式
			changeDateMode(bool) {
				this.isDayMode = bool;
				if(!this.isDayMode) { 
					// 月模式
					this.isSelect1 = true;
					if(this.lastChange) {
						let val = this.lastChange;
						let year = this.years[val[0]];
						let month = this.months[val[1]].toString().padStart(2,0);
						console.log(year,month);
						this.sYear = year;
						this.sMonth = month;
						this.sDay = '01';
						this.eYear = year;
						this.eMonth = month;
						this.eDay = new Date(this.eYear,this.months,0).getDate();
					} else {
						this.sYear = this.curYear;
						this.sMonth = this.curMonth;
						this.sDay = '01';
					}
				} else {
					let now = new Date();
					let curDay = now.getDate().toString().padStart(2,0);
					this.sDay = curDay;
					this.eDay = this.sDay;
					this.eMonth = this.sMonth;
					this.eYear = this.sYear;
				}
			},
			// 开始日期和结束日期切换焦点
			dateRangeSelect(bool) {
				this.isSelect1 = bool;
				this.date2 = `${this.mvalue[0]+1990}-${this.mvalue[1].toString().padStart(2,0)}-${this.mvalue[2].toString().padStart(2,0)}`;

				if(!this.isSelect1) {
					this.eYear = this.mvalue[0] + 1990;
					this.eMonth = (this.mvalue[1] + 1).toString().padStart(2,0);
					this.eDay = (this.mvalue[2] + 1).toString().padStart(2,0);
				} else {
					this.sYear = this.mvalue[0] + 1990;
					this.sMonth = (this.mvalue[1] + 1).toString().padStart(2,0);
					this.sDay = (this.mvalue[2] + 1).toString().padStart(2,0);
				}
				console.log(this.date2);
			}, 
			toggle() {
				this.$emit('update:show',!this.show);
			},
			maskClick() {
				this.$emit('update:show',!this.show);
			}
	    }
	}
</script>

<style lang="scss" scoped>
	
	.mask {
		position: fixed;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0.3); 
		z-index: 1;
		animation: fadeIn 0.5s;
	}
.container {
	background-color: #FFFFFF;
	left: 0;
}	
.fixed-top {
	position: fixed;
	top: 88rpx;
	width: 100vw;
	z-index: 1000;
}
.fixed-bottom {
	position: fixed;
	bottom: 0;
	width: 100vw;
	z-index: 1000;
	border-radius: 60rpx 60rpx 0 0;
	padding-top: 20rpx;
}
.top-wrap{
	border-bottom: 1rpx solid #eee;
}

.item {
	width: 250rpx;
	display: flex;
	justify-content: center;
	align-items: center;
} 
.ways {
	display: flex;
	align-items: center;
	padding: 30rpx ;
	>view {
		font-size: 30rpx;
		width: 196rpx;
		height: 67rpx;
		background-color: rgba(245, 245, 245, 1);
		color: rgba(153, 153, 153, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 60rpx;
		border-radius: 15rpx;
		
		&.active {
			color: rgba(36, 48, 68, 1);
			background-color: rgba(255, 206, 0, 1);
		}
	}
}

.cur-time {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 30rpx;
	
	>view {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	>view:nth-child(2n+1) {
		
		font-size: 36rpx;
		transition: all linear 0.2s;
	}
	>view:nth-child(2n) {
		color: rgba(114, 114, 114, 1);
		font-size: 28rpx;
	}
	>view.active {
		color: rgba(255, 206, 0, 1);
		transform: scale(1.2);
	}
}

.picker-view {
	margin: 30rpx;
}
.btns {
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1rpx solid #eee;
	border-bottom: 1rpx solid #eee;
	
	>view {
		flex: 1;
		height: 122rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	>view:nth-child(2) {
		background-color: rgba(255, 206, 0, 1);
		
	}
}


.fadeIn {
	animation: fadeIn 0.3s;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
</style>
